<template>
    <div class="maincontent">
        <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
                <div style="padding:4px;">

                    <div class="maintitle" style="margin-top:40px;">申请规划设计信息</div>
                    <div class="construction">
                        <div class="item1">
                            <div class="title">土地请查费：</div>
                            <div class="value">{{historyData.landCheckFee}}万元</div>
                            <div style="clear:both;"></div>
                        </div>
                        <div class="item1">
                            <div class="title">可行性研究费：</div>
                            <div class="value">{{historyData.feasibilityStudyFee}}万元</div>
                            <div style="clear:both;"></div>
                        </div>
                        <div class="item1">
                            <div class="title">项目踏勘费：</div>
                            <div class="value">{{historyData.projectSurveyFee}}万元</div>
                            <div style="clear:both;"></div>
                        </div>
                        <div class="item1">
                            <div class="title">规划设计与预算编制费：</div>
                            <div class="value">{{historyData.designBudgetFee}}万元</div>
                            <div style="clear:both;"></div>
                        </div>
                        <div class="item1">
                            <div class="title">规划设计申请书：</div>
                            <div class="value" style="display:flex;align-items:center;"><img src="@/assets/third/file.png" style="width:14px;height:16px;margin-right:2px;"/>{{planningDesignFile.fileName}}
                                <span style="margin-left:24px;color:#409EFF;cursor:pointer;" @click="handleView">查看</span>
                                <span style="margin-left:8px;color:#409EFF;cursor:pointer;" @click="handleDownload">下载</span>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                    </div>

                    <el-form :inline="true" label-position="left" ref="opinionForm" :model="examineOpinion" :rules="opinionFormRule" label-width="80px">
                        <div class="maintitle" style="margin-top:60px;">规划设计条件通知书</div>
                        <div class="formcontent">
                            <el-form-item label="项目规划设计条件书通知书" label-width="210px" prop="notifyFileId">
                                <el-upload
                                    class="upload-demo"
                                    :action="$config.uploadUrl"
                                    :file-list="fileList"
                                    :limit="1"
                                    :on-success="getreport"
                                    >
                                    <el-button size="small">上传</el-button>
                                </el-upload>
                            </el-form-item>
                        </div>
                        <div class="maintitle" style="margin-top:60px;">申请规划设计市中心意见</div>
                        <div class="formcontent">
                            <el-form-item :label="processData[examineOpinion.type].institutions" label-width="140px" style="display:block;" prop="opinion">
                                <el-input v-model="examineOpinion.opinion" style="width:1000px;" type="textarea" rows="5">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="审查人" style="margin-right:60px;">
                              <el-image style="width: 120px; height: 60px" :src="`${$config.baseUrlImg}${userInfo.signedPhoto}`"></el-image>
                            </el-form-item>
                            <el-form-item label="审查日期" prop="createTime">
                              <el-date-picker v-model="examineOpinion.createTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="审查意见" prop="status">
                                <el-select v-model="examineOpinion.status" placeholder="请选择">
                                    <el-option label="同意" :value="0"></el-option>
                                    <el-option label="拒绝" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
<!--                        <div class="formcontent" style="margin-top:60px;">-->
<!--                            <el-form-item label="中心领导意见" label-width="125px" style="display:block;">-->
<!--                                <el-input style="width:1000px;" type="textarea" rows="5">-->
<!--                                </el-input>-->
<!--                            </el-form-item>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <el-form-item label="审查人" style="margin-right:60px;">-->
<!--                                <el-input style="width:200px;">-->
<!--                                </el-input>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="审查日期">-->
<!--                                <el-date-picker-->
<!--                                    type="date"-->
<!--                                    placeholder="审查日期">-->
<!--                                </el-date-picker>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="审查意见">-->
<!--                                <el-select v-model="examineOpinion.type" placeholder="请选择">-->
<!--                                    <el-option label="同意" value="shanghai"></el-option>-->
<!--                                    <el-option label="拒绝" value="beijing"></el-option>-->
<!--                                </el-select>-->
<!--                            </el-form-item>-->
<!--                        </div>-->
<!--                        <div class="formcontent" style="margin-top:60px;">-->
<!--                            <el-form-item label="经办人审查意见" label-width="125px" style="display:block;">-->
<!--                                <el-input style="width:1000px;" type="textarea" rows="5">-->
<!--                                </el-input>-->
<!--                            </el-form-item>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <el-form-item label="审查人" style="margin-right:60px;">-->
<!--                                <el-input style="width:200px;">-->
<!--                                </el-input>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="审查日期">-->
<!--                                <el-date-picker-->
<!--                                    type="date"-->
<!--                                    placeholder="审查日期">-->
<!--                                </el-date-picker>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="审查意见">-->
<!--                                <el-select v-model="examineOpinion.type" placeholder="请选择">-->
<!--                                    <el-option label="同意" value="shanghai"></el-option>-->
<!--                                    <el-option label="拒绝" value="beijing"></el-option>-->
<!--                                </el-select>-->
<!--                            </el-form-item>-->
<!--                        </div>-->
                        <div style="margin-top:40px;">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

            </el-tab-pane>
            <el-tab-pane label="审查流程" name="second">
                <process :processData="processData"></process>
            </el-tab-pane>
        </el-tabs>




    </div>
</template>

<script>
    import process from "../public/process"
    import { getRegPlanningDesignDetail, planningDesignNotifySave, examineOpinionList, getNotifyDetail } from '@/api/plannDesign/application'
    import { getInfo } from '@/api/user'
    import config from '@/config/'
    export default {
        components:{
            process:process
        },
        data() {
            return {
                historyData: {
                    // planningDesignFile: {
                    //     fileName: ''
                    // }
                },
                fileList: [],
                planningDesignFile: {},
                projectId: 1,
                activeName:"first",
                examineOpinion: {
                    groupId: 4, // 审查分组
                    type: 0, // 审查机构类型
                    opinion: "",
                    signature: "",
                    status: 1,
                    createTime: '',
                    notifyFileId: '',
                },

                beforeOpinions: [],
                processData: this.$config.reviewProcessList[4], // 流程信息
                userInfo: {}, // 获取用户信息
                opinionFormRule: {
                    opinion: [{require: true,
                        validator: (rule, value, callback) => {
                            if(value.length < 1 || value.length > 200) {
                                callback(new Error("请输入意见"))
                            }
                            callback()
                        }, trigger: 'blur'}],
                    createTime: [{require: true,
                        validator: (rule, value, callback) => {
                            if(value.length < 1 || value.length > 200) {
                                callback(new Error("请选择时间"))
                            }
                            callback()
                        }, trigger: 'blur'}]
                }
            };
        },

        created() {
            this._initData()
        },
        mounted() {

        },
        methods: {
            onSubmit(){
                let isTrue = false
                this.$refs['opinionForm'].validate(valid => {
                    isTrue = Boolean(valid)
                })
                console.log(this.fileList.length)
                if(!this.fileList.length) {
                    this.$message.error("请上传项目规划设计条件书通知书")
                    return
                }
                if(isTrue) {
                    const data = Object.assign({ examineOpinion: Object.assign(this.examineOpinion, {projectId: this.projectId, signature: this.userInfo.signedPhoto})},
                        {notifyFileId: this.examineOpinion.notifyFileId, projectId: this.projectId})
                    // console.log(data)
                    // return
                    planningDesignNotifySave(data).then(res => {
                        this.$message.success("操作成功")
                    })
                }
            },
            handleView () {
                window.open(`${this.$config.baseUrl}${this.planningDesignFile.filePath}`)
            },
            handleDownload () {
                // downloadFile(this.planningDesignFile.id)
                window.open(`${this.$config.baseUrl}${this.planningDesignFile.filePath}`)
            },
            getreport(res, file, fileList){
                this.examineOpinion['notifyFileId'] = res.data.id
                this.$refs['opinionForm'].validate(valid => {})
                this.fileList = fileList
            },
            // 获取历史数据
            _getHistoryData () {
                getRegPlanningDesignDetail(this.projectId).then(res => {
                    // this.historyData = res.data
                    this.planningDesignFile =  res.data.planningDesignFile
                })
                getNotifyDetail(this.projectId).then(res => {
                    console.log(res)
                    this.historyData = res.data.planningDesignApply
                    const file = res.data.notifyFile
                    file.name = file.fileName
                    file.url = file.filePath
                    this.fileList = [file]
                })
            },
            // 审查流程/审查意见数据获取
            _getProcessList () {
                console.log()
                const opinionType = this.examineOpinion.type
                examineOpinionList({groupId: this.examineOpinion.groupId, projectId: this.projectId}).then(res => {
                    if(res.data.length > 0) { // 审核意见
                        const inx = res.data.findIndex( item => {
                            return item.type == opinionType
                        })
                        if(inx !== -1) {
                            this.examineOpinion = res.data [inx]
                        }
                        this.beforeOpinions = res.data.slice(0, opinionType)

                    }
                    // 流程数据获取
                    let processList = this.processData.slice()
                    for (let i=0; i < processList.length; i++) {
                        let temp = { // 审查流程初始化
                            isReview: false,
                            institutions: processList[i],
                            status: 0
                        }
                        if (res.data[i]) { // 判断是否存在已走流程
                            const item = res.data[i]
                            temp['isReview'] = true
                            temp['groupId'] = item.groupId
                            temp['type'] = item.type
                            temp['status'] = item.status
                            temp['people'] = `${config.baseUrlImg}${item.signature}`
                            temp['date'] = item.createTime
                            temp['advice'] = item.opinion
                        }
                        processList[i] = temp
                    }
                    this.processData = processList
                    console.log(this.processData, this.beforeOpinions)
                })
            },
            _initData() {
                this._getHistoryData()
                this._getProcessList()
                getInfo().then(res => {
                    this.userInfo = res.data
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .maincontent{
        margin: 10px;
        box-sizing: border-box;
        background: #ffffff;
        padding: 20px;
        .maintitle{
            font-size:18px;
            font-family:PingFang SC;
            font-weight:bold;
            line-height:25px;
            color: #4d4d4d;
        }
        .investmentmsg{
            .totalInvestment{
                width: 250px;
                height: 160px;
                margin-right: 30px;
                float: left;
                position: relative;
                margin-top: 15px;
                .contentbox{
                    width: 242px;
                    height: 100%;
                    background: #F6A924;
                    .title{
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:20px;
                        margin-left: 30px;
                        padding-top: 30px;
                        color: #ffffff;
                    }
                    .value{
                        font-size:40px;
                        font-family:PingFang SC;
                        font-weight:bold;
                        line-height:56px;
                        margin-top: 14px;
                        color: #ffffff;
                        text-align: center;
                        span{
                            font-size:13px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:18px;
                        }
                    }
                }
                .youjiantou{
                    position: absolute;
                    width:0;
                    height:0;
                    border-width:30px 0 30px 30px;
                    border-style:solid;
                    border-color:transparent transparent transparent #F6A924;
                    right: 0;
                    top: 50%;
                    margin-top: -30px;
                }
            }
            .childInvestment{
                width: 480px;
                height: 160px;
                float: left;
                margin-top: 15px;
                .leftbox{
                    width: 240px;
                    height: 160px;
                    float: left;
                    border-radius: 4px;
                    .title{
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:20px;
                        margin-left: 30px;
                        padding-top: 30px;
                        color: #ffffff;
                    }
                    .value{
                        font-size:40px;
                        font-family:PingFang SC;
                        font-weight:bold;
                        line-height:56px;
                        margin-top: 14px;
                        color: #ffffff;
                        text-align: center;
                        span{
                            font-size:13px;
                            font-family:PingFang SC;
                            font-weight:500;
                            line-height:18px;
                        }
                    }
                }
                .rightbox{
                    width: 240px;
                    height: 160px;
                    float: left;
                    padding-top: 20px;
                    padding-left: 30px;
                    background: #F3F6F8;
                    border-radius: 4px;
                    .item-content{
                        font-size:13px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:18px;
                        color: #969899;
                        margin-bottom: 7px;
                    }
                }
            }
        }



        .formcontent{
            margin-top: 30px;
            .secondtitle{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #666666;
                span{
                    font-size:13px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:18px;
                    margin-right: 30px;
                    color: #a6a6a6;
                }
            }
            .purchaseExpense{
                margin-top: 20px;
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #666666;
                span{
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:20px;
                    color: #a6a6a6;
                    margin-right:60px;
                }
            }
            .allInvestment{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:bold;
                line-height:20px;
                margin-top: 20px;
                color: #333333;
                span{
                    font-weight: 500;
                }
            }
        }
        .construction{
            padding-top: 10px;
            .item1{
                margin-top: 20px;
                .title{
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:20px;
                    color: #666666;
                    float: left;
                    width: 160px;
                    text-align: right;
                }
                .value{
                    float: left;
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:500;
                    line-height:20px;
                    color: #a6a6a6;
                }
            }
        }
    }
</style>
